<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-blue'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">会员权益</block>
		</cu-custom>
		<!-- <view style="height: 545rpx; background-size: cover;  background-position: center;"
			:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">

			<ad unit-id="adunit-8f5833c88a4b6a95" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
		</view> -->
		<view class=" padding" :class="isDark?'darkIn':'bg-white'">
			<text class="margin-top" style="font-weight: 500;letter-spacing:2rpx" v-if="isVIP==false">V0</text>
			<text class="margin-top" style="font-weight: 500;letter-spacing:2rpx" v-if="isVIP==true">VIP</text>
			<view class="padding margin-top-xs" :class="isDark?'darkIn':'bg-white'">
				<view class="cu-steps">
					<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList"
						:key="index">
						<text :class="index>basics?'cuIcon-title':'cuIcon-' + item.cuIcon"></text> {{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="container" :class="isDark?'dark':''">

			<view class="margin-top" style="border-radius: 19rpx;" :class="isDark?'darkIn':'bg-white'">
				<view class='cu-tag bg-olive radius'>基本特权</view>
				<view class="cu-list grid col-4 no-border ">

					<view class="cu-item">
							<view class="cuIcon-roundclose text-blue">
							</view>
							<text>去除水印</text>
					</view>

					<view class="cu-item">
							<view class="cuIcon-attention text-green">
							</view>
							<text>模式选择</text>
					</view>
					<view class="cu-item">
							<view class="cuIcon-loading text-pink">
							</view>
							<text>快速启动</text>
					</view>
					<view class="cu-item">
							<view class="cuIcon-flashbuyfill text-purple">
							</view>
							<text>推送设置</text>
					</view>
				</view>

			</view>

			<view class="margin-top" style="border-radius: 19rpx;" :class="isDark?'darkIn':'bg-white'">
				<view class='cu-tag bg-olive radius'>生日特权</view>
				<view class="cu-list grid col-4 no-border ">

					<view class="cu-item">		
							<view class="cuIcon-sort text-blue">
							</view>
							<text>公告祝福</text>
					</view>


				</view>

			</view>


			<view class="margin-top" style="border-radius: 19rpx;" :class="isDark?'darkIn':'bg-white'">
				<view class='cu-tag bg-olive radius'>更多权益</view>
				<view class="cu-list grid col-4 no-border ">

					<view class="cu-item">			
							<view class="cuIcon-cart text-blue">
							</view>
							<text>发放福利</text>
					</view>



				</view>

			</view>

		</view>
		<zmm-watermark>

		</zmm-watermark>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				isDark: this.isDark,
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: 'V0'
				}, {
					cuIcon: 'radioboxfill',
					name: 'VIP'
				}],
				basics: 0,
				isVIP: false,
			}
		},
		onShow() {
			let _this = this
			const userInfo = _this.$store.state.userInfo

			if (userInfo.isVIP) {
				if (userInfo.isVIP == 'true') {
					_this.basics=1
					_this.isVIP = true
				} else {
					_this.isVIP = false
				}
			} else {
				_this.isVIP = false
			}
		},
		methods: {


		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		font-family: 'Courier New', Courier, monospace;
	}

	.smallButton {
		width: 400rpx;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		-moz-border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		border-radius: 10rpx;
		/* future proofing */
		-khtml-border-radius: 10rpx;
		/* for old Konqueror browsers */
		text-align: center;
		border: 1rpx solid transparent;
		margin: 0 rpx auto;
		font-size: 37rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
	}
</style>
